<template>
  <div class="admin-role-header">
    <el-input
        class="role-value-input"
        placeholder="请输入要添加的角色"
        v-model="roleValue"
        @keyup.enter="addRole"
    >

    </el-input>
    <el-button type="primary" @click="addRole">添加</el-button>
  </div>

  <div class="main">
    <el-table :data="itemList" stripe style="width: 100%" max-height="400">
      <el-table-column prop="role.role" label="角色" width="150"/>


      <el-table-column prop="permissions" label="权限" width="400">
        <template #default="scope">
          <el-select
              v-model="scope.row.permissions"
              multiple
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="2"
              style="width: 300px"
          >
            <el-option
                v-for="item in permissionsOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="permissions" label="角色分配" width="400">
        <template #default="scope">
          <el-select
              v-model="scope.row.adminInfos"
              collapse-tags
              multiple
              collapse-tags-tooltip
              :max-collapse-tags="3"
              style="width: 300px"
          >
            <el-option
                v-for="item in adminOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button-group>
            <el-button

                type="primary"
                size="small"
                :icon="EditOutlined"
                @click="updateRole(scope.row)"
            >提交
            </el-button
            >
            <el-button
                type="danger"
                size="small"
                :icon="DeleteOutlined"
                @click="deleteRole(scope.row)"
            >删除
            </el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>


  </div>


</template>

<script setup lang="ts">
import {DeleteOutlined, EditOutlined} from "@ant-design/icons-vue";
import {onBeforeMount, ref} from "vue";
import axios from "@/request/axios.ts";
import {ElMessage} from "element-plus";

const itemList = ref([])

const permissionsOpt = ref([])

const adminOpt = ref([])

// 添加角色
const roleValue = ref("");

const addRole = async () => {
  if (!(roleValue.value.trim())) {
    ElMessage.warning("角色名不能为空");
    return;
  }
  await axios.post(`/api/role/${roleValue.value}`)
      .then(({data}) => {

        if (data.code === 200) {
          getRoleAllInfo();
        }

      })

}

const updateRole = async (data) => {

  await axios.post("/api/role", data).then(({data}) => {
    if (data.code === 200) {
      ElMessage.success("提交成功");
    }
    // getRoleAllInfo();
  });

}
const deleteRole = async (data)=>{
  let roleId = data.role.roleId;
  await axios.delete(`/api/role/${roleId}`).then(({data}) => {
    if (data.code === 200) {
      ElMessage.success("删除成功");
    }
    getRoleAllInfo();
  });

}





const getRoleAllInfo = async () => {
  await axios.get("/api/role/admin").then(({data}) => {
    itemList.value = data.data;

    itemList.value.forEach((value, index, array) => {
      value['permissions'].forEach((v, i, arr) => {
        arr[i] = v.permissionId
      })

      value['adminInfos'].forEach((v, i, arr) => {
        arr[i] = v.adminId
      })
    })
  })
}
onBeforeMount(async () => {
  // 获取角色信息
  getRoleAllInfo();

  // 获取所有可选择的权限
  await axios.get("/api/permission").then(({data}) => {
    permissionsOpt.value = data.data;
    permissionsOpt.value.forEach((value, index, array) => {
      array[index].label = value.permission;
      array[index].value = value.permissionId;
    })
  })

  // 获取所有可选择的用户
  await axios.get("/api/admin/simple").then(({data}) => {
    adminOpt.value = data.data;
    console.log(data.data)
    adminOpt.value.forEach((value, index, array) => {
      array[index].label = value.adminName;
      array[index].value = value.adminId;
    })
  })

})

</script>

<style scoped>
.role-value-input {
  width: 200px;
  margin-right: 20px;
}


</style>